<template>
  <div class="login-wrap">
    <div class="left">
      <div class="images"></div>
      <div class="mission">
        <ul>
          <li>
            <svg
              class="mission-icon"
              xmlns="http://www.w3.org/2000/svg"
              width="128.692"
              height="256.103"
              viewBox="0 0 128.692 256.103"
            >
              <defs />
              <g transform="translate(-1912.575 -5200.542)">
                <rect width="63.846" height="63.846" transform="translate(1913.075 5201.042)" />
                <line class="a" y1="9.647" x2="9.647" transform="translate(1926.809 5241.507)" />
                <line class="a" y1="9.647" x2="9.647" transform="translate(1953.539 5214.777)" />
                <line class="a" x2="9.647" y2="9.647" transform="translate(1926.809 5214.777)" />
                <line class="a" x2="9.647" y2="9.647" transform="translate(1953.539 5241.507)" />
                <line class="a" x2="4.235" y2="4.235" transform="translate(1942.88 5230.848)" />
                <line class="a" x1="4.235" y2="4.235" transform="translate(1942.88 5230.848)" />
                <path
                  d="M1996.981,5361.387a31.711,31.711,0,0,1-2.079,4.126V5379.2h-1.433v-11.564a20.862,20.862,0,0,1-2.221,2.579,7.5,7.5,0,0,0-.848-1.429,22.2,22.2,0,0,0,5.168-7.835Zm6.4,10.533a8.1,8.1,0,0,1-1.332,3.809,20.92,20.92,0,0,0,7.429,2.1,5.088,5.088,0,0,0-.888,1.329,20.524,20.524,0,0,1-7.43-2.4,10.8,10.8,0,0,1-4.562,2.42,4.943,4.943,0,0,0-.909-1.21,10.035,10.035,0,0,0,4.26-2,11,11,0,0,1-2.927-3.234l1.251-.4a8.4,8.4,0,0,0,2.544,2.639,6.732,6.732,0,0,0,1.09-3.055h-4.885v-5.436h4.987v-1.944h-5.572v-1.349h5.572v-2.122h1.473v2.122h5.814v1.349h-5.814v1.944h5.148v5.436Zm-1.393-1.25c.021-.3.021-.595.021-.893v-2.043h-3.594v2.936Zm1.494-2.936v2.043c0,.3,0,.6-.02.893h3.734v-2.936Z"
                />
                <path
                  d="M2021.494,5361.624a3.665,3.665,0,0,1-.343.437,18.416,18.416,0,0,0,8.418,4.76,7.465,7.465,0,0,0-1.09,1.389,18.933,18.933,0,0,1-4.34-2v1.349h-8.015v-1.25a21.068,21.068,0,0,1-4.38,2,7.023,7.023,0,0,0-.848-1.429,18.038,18.038,0,0,0,9.427-6.11Zm-2.6,14.3h-4.744v1.666h-1.393v-8.41h6.137Zm-4.744-5.436v4.126h3.331v-4.126Zm9.972-4.284a17.673,17.673,0,0,1-3.835-3.154,19.357,19.357,0,0,1-4,3.154Zm3.675,8.529c0,.774-.162,1.191-.728,1.429a8.779,8.779,0,0,1-3.047.258,5.7,5.7,0,0,0-.445-1.369c1.131.04,2.1.019,2.383.019.3-.019.383-.1.383-.356v-4.206h-3.876v8.629h-1.474v-9.978h6.8Z"
                />
                <path
                  d="M1950.744,5386.849h2.261l2.847,7.775c.342,1.012.686,2.023,1.049,3.035h.1c.344-1.012.666-2.023,1.01-3.035l2.826-7.775h2.261v14.54h-1.756v-8.054c0-1.25.14-3.015.242-4.284h-.081l-1.171,3.312-2.806,7.558h-1.252l-2.805-7.558-1.171-3.312h-.081c.081,1.269.221,3.034.221,4.284v8.054h-1.695Z"
                />
                <path d="M1967.14,5386.849h1.878v14.54h-1.878Z" />
                <path
                  d="M1971.986,5399.484l1.111-1.25a5.86,5.86,0,0,0,4.1,1.806c1.938,0,3.109-.952,3.109-2.381,0-1.487-1.07-1.964-2.463-2.578l-2.14-.913c-1.373-.575-3.008-1.606-3.008-3.73,0-2.241,1.979-3.867,4.663-3.867a6.123,6.123,0,0,1,4.361,1.805l-.989,1.17a4.839,4.839,0,0,0-3.372-1.368c-1.675,0-2.765.833-2.765,2.142,0,1.409,1.292,1.944,2.442,2.42l2.12.893c1.716.733,3.048,1.725,3.048,3.888,0,2.3-1.937,4.125-5.026,4.125A7.133,7.133,0,0,1,1971.986,5399.484Z"
                />
                <path
                  d="M1983.738,5399.484l1.111-1.25a5.856,5.856,0,0,0,4.1,1.806c1.939,0,3.11-.952,3.11-2.381,0-1.487-1.071-1.964-2.463-2.578l-2.141-.913c-1.372-.575-3.008-1.606-3.008-3.73,0-2.241,1.979-3.867,4.664-3.867a6.124,6.124,0,0,1,4.361,1.805l-.99,1.17a4.836,4.836,0,0,0-3.371-1.368c-1.675,0-2.765.833-2.765,2.142,0,1.409,1.292,1.944,2.442,2.42l2.119.893c1.716.733,3.049,1.725,3.049,3.888,0,2.3-1.938,4.125-5.026,4.125A7.133,7.133,0,0,1,1983.738,5399.484Z"
                />
                <path d="M1996.862,5386.849h1.877v14.54h-1.877Z" />
                <path
                  d="M2001.931,5394.069c0-4.662,2.6-7.5,6.319-7.5s6.318,2.836,6.318,7.5-2.6,7.577-6.318,7.577S2001.931,5398.73,2001.931,5394.069Zm10.719,0c0-3.65-1.755-5.891-4.4-5.891-2.665,0-4.4,2.241-4.4,5.891,0,3.63,1.736,5.971,4.4,5.971C2010.9,5400.04,2012.65,5397.7,2012.65,5394.069Z"
                />
                <path
                  d="M2017.761,5386.849h1.938l5.39,9.164,1.575,3h.1c-.1-1.469-.243-3.095-.243-4.6v-7.557h1.777v14.54h-1.918l-5.39-9.185-1.595-3h-.081c.081,1.468.223,3.016.223,4.543v7.637h-1.777Z"
                />
                <path d="M2019.3,5426.752h10.739v1.21H2019.3Z" />
                <rect
                  class="b"
                  width="127.692"
                  height="255.103"
                  transform="translate(1913.075 5201.042)"
                />
              </g>
            </svg>
            <div class="info-content">
              <div class="text">
                美好产品
                <br />成就美好生活
              </div>
              <div class="e-text">
                Great products make
                <br />wonderful life
              </div>
            </div>
          </li>
          <li>
            <div class="info-content">
              <div class="text">
                成为
                <br />全球化知名品牌
              </div>
              <div class="e-text">
                To be one of the
                <br />worId' s leading brand
              </div>
            </div>

            <svg
              class="VISION-icon"
              xmlns="http://www.w3.org/2000/svg"
              width="110.79"
              height="177.27"
              viewBox="0 0 110.79 177.27"
            >
              <g transform="translate(-693.024 -4076.922)">
                <path
                  d="M703.333,4192.306c0,2.3-.153,5.823-1.311,8.208a3.224,3.224,0,0,0-.823-.563c1.074-2.261,1.172-5.439,1.172-7.645v-3.824H713.4v.836H703.333Zm-.2,7.179a8.871,8.871,0,0,0,1.088-2.507l.766.288a11.649,11.649,0,0,1-1.046,2.562Zm3.556-5.083a17.965,17.965,0,0,1-2.4,1.905,4.086,4.086,0,0,0-.753-.6,13.33,13.33,0,0,0,2.273-1.6Zm5.858-.521h-3.613v1.562c0,.466-.1.658-.46.795a6.008,6.008,0,0,1-1.715.123,3.313,3.313,0,0,0-.335-.754c.628.014,1.172.014,1.339,0s.21-.054.21-.177v-1.549h-3.417v-3.617h3.026c.083-.316.181-.658.223-.918l1.158.192c-.126.246-.238.493-.349.726h3.933Zm-1-2.973h-6.039v.85h6.039Zm0,1.48h-6.039v.849h6.039Zm-1.534,7c.586,0,.683-.151.739-1.329a2.3,2.3,0,0,0,.851.329c-.112,1.493-.419,1.836-1.507,1.836h-2.663c-1.381,0-1.744-.247-1.744-1.206v-2h.92v1.986c0,.329.126.384.866.384Zm-1.743-2.809a21.076,21.076,0,0,1,1.575,1.575l-.711.493a16.493,16.493,0,0,0-1.563-1.643Zm4.267-.261c-.572-.452-1.674-1.192-2.524-1.713l.641-.534a21.9,21.9,0,0,1,2.552,1.631Zm-.446.439a27.2,27.2,0,0,1,1.673,2.3l-.837.4a22.555,22.555,0,0,0-1.631-2.4Z"
                />
                <path
                  d="M719.628,4198.17a14.926,14.926,0,0,1-3.612,2.042,6.212,6.212,0,0,0-.739-.727,12.37,12.37,0,0,0,3.4-1.672Zm8.048-5.069v.836H715.431v-.836h5.647a5.245,5.245,0,0,0-.418-.618l.781-.259h-4.435v-3.8h9.136v3.8h-4.534a5.906,5.906,0,0,1,.573.877Zm-5.579,4.343v2.014c0,.507-.126.727-.531.85a7.451,7.451,0,0,1-2.021.136,3.67,3.67,0,0,0-.293-.821c.711.027,1.381.027,1.575.027s.237-.069.237-.219v-1.987h-3.737v-2.8h8.549v2.8Zm-4.1-7.467h7.127v-.85H718Zm0,1.547h7.127v-.877H718Zm.335,5.166h6.513V4195.4h-6.513Zm5.606,1.164a20.18,20.18,0,0,1,3.7,1.727l-.7.672a19.932,19.932,0,0,0-3.655-1.809Z"
                />
                <path
                  d="M700.669,4205.788h1.353l1.66,5.44c.362,1.178.6,2.137.99,3.316h.056c.376-1.179.627-2.138.99-3.316l1.645-5.44h1.312l-3.25,10.044h-1.492Z"
                />
                <path d="M710.757,4205.788h1.3v10.044h-1.3Z" />
                <path
                  d="M714.1,4214.517l.768-.864a4.045,4.045,0,0,0,2.831,1.247c1.339,0,2.148-.658,2.148-1.644,0-1.027-.74-1.357-1.7-1.781l-1.478-.63a2.852,2.852,0,0,1-2.078-2.576c0-1.549,1.367-2.672,3.221-2.672a4.232,4.232,0,0,1,3.013,1.246l-.683.808a3.347,3.347,0,0,0-2.33-.945c-1.157,0-1.911.576-1.911,1.481,0,.972.893,1.342,1.689,1.67l1.464.618c1.185.506,2.106,1.192,2.106,2.685,0,1.59-1.339,2.85-3.474,2.85A4.928,4.928,0,0,1,714.1,4214.517Z"
                />
                <path d="M723.174,4205.788h1.3v10.044h-1.3Z" />
                <path
                  d="M726.676,4210.775c0-3.219,1.8-5.178,4.365-5.178s4.365,1.959,4.365,5.178-1.8,5.235-4.365,5.235S726.676,4214,726.676,4210.775Zm7.406,0c0-2.52-1.214-4.069-3.041-4.069s-3.04,1.549-3.04,4.069,1.2,4.125,3.04,4.125S734.082,4213.283,734.082,4210.775Z"
                />
                <path
                  d="M737.614,4205.788h1.339l3.724,6.331,1.088,2.069h.07c-.07-1.014-.168-2.138-.168-3.179v-5.221H744.9v10.044h-1.326l-3.723-6.344-1.1-2.069h-.056c.056,1.014.154,2.083.154,3.138v5.275h-1.228Z"
                />
                <path d="M700.837,4233.356h7.419v.836h-7.419Z" />
                <rect
                  class="a"
                  width="88.232"
                  height="176.27"
                  transform="translate(693.524 4077.422)"
                />
                <rect width="44.116" height="44.116" transform="translate(759.698 4106.292)" />
                <line class="b" y1="6.666" x2="6.665" transform="translate(769.188 4134.253)" />
                <line class="b" y1="6.666" x2="6.665" transform="translate(787.658 4115.783)" />
                <line class="b" x2="6.666" y2="6.665" transform="translate(769.188 4115.783)" />
                <line class="b" x2="6.666" y2="6.665" transform="translate(787.658 4134.253)" />
                <line class="b" x2="2.926" y2="2.926" transform="translate(780.293 4126.887)" />
                <line class="b" x1="2.926" y2="2.926" transform="translate(780.293 4126.887)" />
              </g>
            </svg>
          </li>
          <li>
            <svg
              class="Values-icon"
              xmlns="http://www.w3.org/2000/svg"
              width="89.232"
              height="177.27"
              viewBox="0 0 89.232 177.27"
            >
              <g transform="translate(-305.629 -4273.538)">
                <path
                  d="M350.293,4384.862a21.686,21.686,0,0,1-1.354,2.959v9.249h-1.017v-7.577a12.435,12.435,0,0,1-1.186,1.508,10.488,10.488,0,0,0-.6-.987,15.389,15.389,0,0,0,3.179-5.44Zm4.672-.137c-.1.192-.2.411-.293.617a12.026,12.026,0,0,0,4.365,4.137,3.577,3.577,0,0,0-.725.795,13.357,13.357,0,0,1-4.142-4.028,12.53,12.53,0,0,1-4.365,4.22,3.294,3.294,0,0,0-.642-.795,10.631,10.631,0,0,0,4.7-5.138Zm-3.278,5.152h1.033v1.863a6.321,6.321,0,0,1-2.442,5.441,3.05,3.05,0,0,0-.753-.713,5.305,5.305,0,0,0,2.162-4.741Zm3.933-.027h1.046v7.193H355.62Z"
                />
                <path
                  d="M364.147,4384.876a19.84,19.84,0,0,1-1.422,3.124v9.07h-.962v-7.549a15.166,15.166,0,0,1-1.186,1.494,8.135,8.135,0,0,0-.572-1,15.6,15.6,0,0,0,3.208-5.426Zm8.675,10.92v.877h-9.3v-.877h1.325v-7.659h2.4c.084-.37.167-.823.265-1.275h-3.4v-.89h3.557c.069-.493.139-.987.181-1.4l1.1.069c-.083.411-.167.877-.264,1.329H372.4v.89H368.5c-.111.452-.209.905-.32,1.275h3.4v7.659Zm-7.043-6.864v1.15h4.839v-1.15Zm4.839,1.9h-4.839V4392h4.839Zm-4.839,3.083h4.839v-1.178h-4.839Zm0,1.877h4.839v-1.123h-4.839Z"
                />
                <path
                  d="M378.225,4395.139a15.872,15.872,0,0,0-.976-2.152,11.427,11.427,0,0,1-2.483,3.522,5.051,5.051,0,0,0-.767-.768,10.825,10.825,0,0,0,2.622-3.877,32.854,32.854,0,0,0-2.329-3.467l.8-.507c.669.863,1.366,1.837,1.994,2.809a21.777,21.777,0,0,0,.99-4.1h-3.835v-.974h4.086l.2-.041.655.192a24.6,24.6,0,0,1-1.408,6.015,17.76,17.76,0,0,1,1.352,2.714Zm7.238.9c.446,0,.53-.356.586-2.3a2.728,2.728,0,0,0,.85.384c-.125,2.151-.264,2.7-1.45,2.7h-1.172c-.92,0-1.3-.261-1.3-1.151v-3.11a7.139,7.139,0,0,1-3.9,4.507,2.7,2.7,0,0,0-.641-.739,6.444,6.444,0,0,0,3.919-6.427v-2.617h.976v2.631a10.03,10.03,0,0,1-.265,2.356h.878v3.3c0,.37.126.466.489.466Zm-4.574-3.59H379.9v-7.222h6.1v7.222h-1.018v-6.317h-4.086Z"
                />
                <path
                  d="M337.432,4402.428h1.353l1.659,5.44c.363,1.178.6,2.137.991,3.316h.055c.377-1.179.628-2.138.99-3.316l1.646-5.44h1.311l-3.25,10.044H340.7Z"
                />
                <path
                  d="M351.312,4409.4h-3.738l-.99,3.07h-1.311l3.473-10.044h1.437l3.472,10.044h-1.367Zm-.321-1.013-.488-1.535c-.376-1.137-.7-2.234-1.031-3.4h-.057c-.32,1.179-.655,2.262-1.018,3.4l-.5,1.535Z"
                />
                <path d="M355.1,4402.428h1.3v8.962h4.462v1.082H355.1Z" />
                <path
                  d="M362.168,4408.32v-5.892h1.3v5.933c0,2.425,1.047,3.179,2.371,3.179,1.367,0,2.44-.754,2.44-3.179v-5.933h1.243v5.892c0,3.234-1.591,4.329-3.683,4.329S362.168,4411.554,362.168,4408.32Z"
                />
                <path
                  d="M372.27,4402.428h5.9v1.069h-4.6v3.151h3.877v1.082h-3.877v3.66h4.756v1.082H372.27Z"
                />
                <path
                  d="M379.734,4411.156l.768-.863a4.045,4.045,0,0,0,2.831,1.247c1.339,0,2.147-.658,2.147-1.644,0-1.028-.739-1.357-1.7-1.782l-1.478-.63a2.849,2.849,0,0,1-2.078-2.576c0-1.549,1.367-2.672,3.221-2.672a4.233,4.233,0,0,1,3.013,1.247l-.684.808a3.34,3.34,0,0,0-2.329-.945c-1.157,0-1.91.575-1.91,1.48,0,.973.893,1.343,1.688,1.671l1.464.617c1.185.507,2.106,1.192,2.106,2.686,0,1.59-1.339,2.849-3.473,2.849A4.927,4.927,0,0,1,379.734,4411.156Z"
                />
                <path d="M379.791,4430h7.419v.836h-7.419Z" />
                <rect
                  class="a"
                  width="88.232"
                  height="176.27"
                  transform="translate(306.129 4274.038)"
                />
                <rect
                  class="a"
                  width="44.116"
                  height="44.116"
                  transform="translate(350.245 4274.038)"
                />
                <line class="a" y1="6.666" x2="6.665" transform="translate(359.736 4301.998)" />
                <line class="a" y1="6.666" x2="6.665" transform="translate(378.205 4283.528)" />
                <line class="a" x2="6.666" y2="6.665" transform="translate(359.736 4283.528)" />
                <line class="a" x2="6.666" y2="6.665" transform="translate(378.205 4301.998)" />
                <line class="a" x2="2.926" y2="2.926" transform="translate(370.84 4294.633)" />
                <line class="a" x1="2.926" y2="2.926" transform="translate(370.84 4294.633)" />
              </g>
            </svg>
            <div class="info-content">
              <div class="text">
                开放态度
                <br />创新精神
                <br />团队合作
                <br />勇于担当
              </div>
              <div class="e-text">
                Transparency
                <br />Innovation
                <br />Teamwork
                <br />Responsibility
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="right-login">
        <div class="logo">BISON</div>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="35px"
          size="small"
          @keyup.enter.native="handleLogin()"
        >
          <el-form-item prop="username">
            <span slot="label">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="11.411"
                height="15.292"
                viewBox="0 0 11.411 15.292"
              >
                <g transform="translate(-1278.501 -2080.64)">
                  <path
                    d="M1289.3,2095.932a.616.616,0,0,1-.615-.615,4.474,4.474,0,0,0-8.949,0,.616.616,0,0,1-1.232,0h0a5.713,5.713,0,0,1,3.486-5.263,5.49,5.49,0,0,1,.708-.246,4.706,4.706,0,1,1,4.844-1.13l0,0a4.672,4.672,0,0,1-1.818,1.133,5.5,5.5,0,0,1,.707.246,5.707,5.707,0,0,1,3.487,5.256A.616.616,0,0,1,1289.3,2095.932Zm-5.092-14.058a3.478,3.478,0,1,0,3.478,3.478v0A3.482,3.482,0,0,0,1284.2,2081.874Z"
                  />
                </g>
              </svg>
            </span>
            <el-input v-model="loginForm.username" placeholder="Username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <span slot="label">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12.657"
                height="16.754"
                viewBox="0 0 12.657 16.754"
              >
                <g transform="translate(-1278.614 -2161.521)">
                  <path
                    d="M1290.032,2178.275h-10.179a1.271,1.271,0,0,1-1.239-1.3v-8.785a6.879,6.879,0,0,1,.5-2.589,6.664,6.664,0,0,1,1.357-2.118,6.317,6.317,0,0,1,2.011-1.436,6.015,6.015,0,0,1,4.926,0,6.319,6.319,0,0,1,2.01,1.435,6.731,6.731,0,0,1,1.358,2.118,6.849,6.849,0,0,1,.495,2.589v8.786a1.317,1.317,0,0,1-.38.94A1.206,1.206,0,0,1,1290.032,2178.275Zm-10.142-8.259v6.956a.056.056,0,0,0,0,.026H1290a.117.117,0,0,0,0-.026v-6.956Zm3.092-6.794h0a5.027,5.027,0,0,0-1.581,1.136,5.426,5.426,0,0,0-1.1,1.716,5.651,5.651,0,0,0-.407,2.114v.555H1290v-.552a5.637,5.637,0,0,0-.406-2.115,5.51,5.51,0,0,0-1.1-1.718,5.166,5.166,0,0,0-1.607-1.146,4.769,4.769,0,0,0-1.94-.415,4.628,4.628,0,0,0-1.936.418l-.026.009Z"
                  />
                  <path
                    d="M1284.354,2172.887v1.673a.6.6,0,0,0,1.185,0v-1.673a1.084,1.084,0,0,0,.5-.92,1.1,1.1,0,1,0-2.193,0A1.111,1.111,0,0,0,1284.354,2172.887Z"
                  />
                </g>
              </svg>
            </span>
            <el-input
              :type="passwordType"
              v-model="loginForm.password"
              ref="password"
              placeholder="Password"
            ></el-input>
            <span class="show-pwd" @click="showPwd">
              <i :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-circle-close'"></i>
            </span>
          </el-form-item>
          <el-button @click="handleLogin" class="Login" :icon="loading?'el-icon-loading':''">Login</el-button>
        </el-form>
      </div>
      <div class="footer">
        <div class="logo-leaderment">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="134.436"
            height="26.759"
            viewBox="0 0 134.436 26.759"
          >
            <g transform="translate(-1373.059 -2534.092)">
              <rect
                class="a"
                width="26.759"
                height="26.759"
                transform="translate(1373.059 2534.092)"
              />
              <path
                class="b"
                d="M1378.4,2554.373h0a1.405,1.405,0,0,1-1.4-1.4V2550.4a1.4,1.4,0,0,1,2.8,0v2.578a1.405,1.405,0,0,1-1.4,1.4"
              />
              <path
                class="b"
                d="M1382.038,2554.373h0a1.4,1.4,0,0,1-1.4-1.4v-4.034a1.4,1.4,0,1,1,2.8,0v4.034a1.4,1.4,0,0,1-1.4,1.4"
              />
              <path
                class="b"
                d="M1385.68,2554.429h0a1.4,1.4,0,0,1-1.4-1.4v-5.435a1.4,1.4,0,1,1,2.8,0v5.435a1.4,1.4,0,0,1-1.4,1.4"
              />
              <path
                class="b"
                d="M1389.377,2554.485h0a1.4,1.4,0,0,1-1.4-1.4v-11.542a1.4,1.4,0,0,1,2.8,0v11.542a1.4,1.4,0,0,1-1.4,1.4"
              />
              <path
                class="b"
                d="M1396.213,2553.113h0a1.4,1.4,0,0,1-1.4,1.4h-5.435a1.4,1.4,0,0,1,0-2.8h5.435a1.405,1.405,0,0,1,1.4,1.4"
              />
              <path
                class="c"
                d="M1405.922,2540.15h.166q.881.186.881.834v11.084h5.44q.807,0,.955,1.029-.27.89-.955.89H1406q-.769,0-.946-.955v-11.853q.111-1.029.872-1.029"
              />
              <path
                class="c"
                d="M1416.16,2544.621a4.979,4.979,0,0,1,5.277.132,5.059,5.059,0,0,1,1.654,1.752l.1.177q.328.9-.338,1.287l-6.011,3.47a2.808,2.808,0,0,0,2.1.618,3.893,3.893,0,0,0,1.327-.445,4.154,4.154,0,0,0,1.282-1.34l.256-.148a.9.9,0,0,1,1.209.351l.051.088q.547.948-1.656,2.637l-.225.13a4.959,4.959,0,0,1-5.021-.023,5.114,5.114,0,0,1-1.821-1.838,4.978,4.978,0,0,1,.058-5.107,5.4,5.4,0,0,1,1.756-1.741m-.416,5.248,5.258-3.035a3.444,3.444,0,0,0-1.357-.811,3.028,3.028,0,0,0-2.257.169l-.329.19a2.907,2.907,0,0,0-1.416,2.551,2.835,2.835,0,0,0,.1.936"
              />
              <path
                class="c"
                d="M1432.113,2552.93a4.193,4.193,0,0,1-2.984,1.057h-.269a5.01,5.01,0,0,1-4.263-2.558,5.528,5.528,0,0,1-.621-2.493,4.986,4.986,0,0,1,2.743-4.439,5.353,5.353,0,0,1,2.28-.547,5.054,5.054,0,0,1,4.5,2.78,5.687,5.687,0,0,1,.51,2.345v4.013q0,.741-.908.9h-.065a1,1,0,0,1-.936-.742v-.1Zm-6.228-4.031v.1a3.058,3.058,0,0,0,2.975,3.077h.269a3.034,3.034,0,0,0,2.6-1.585,3.174,3.174,0,0,0,.371-1.418v-.139a3.047,3.047,0,0,0-1.808-2.8,3.144,3.144,0,0,0-1.3-.278h-.037a3.1,3.1,0,0,0-2.892,2,3.712,3.712,0,0,0-.185,1.038"
              />
              <path
                class="c"
                d="M1443.99,2540.159h.167q.881.186.88.844v6.932l.037,1.186a5.135,5.135,0,0,1-1.186,3.049,5.047,5.047,0,0,1-3.781,1.817h-.278a5.153,5.153,0,0,1-3.819-1.919,5.393,5.393,0,0,1-1.084-3.16,5.052,5.052,0,0,1,2.187-4.143,5.148,5.148,0,0,1,2.892-.926,4.55,4.55,0,0,1,3.151,1.093V2541.6l-.037-.6q.268-.844.871-.844m-7.146,8.647v.176a3.113,3.113,0,0,0,2.067,2.929,3.511,3.511,0,0,0,.983.157h.213a3.111,3.111,0,0,0,2.891-2.057,4.218,4.218,0,0,0,.158-.955v-.213a3.128,3.128,0,0,0-2.095-2.929,4.464,4.464,0,0,0-.991-.157h-.139a3.112,3.112,0,0,0-2.892,2.03,3.161,3.161,0,0,0-.195,1.019"
              />
              <path
                class="c"
                d="M1448.028,2544.621a4.979,4.979,0,0,1,5.277.132,5.06,5.06,0,0,1,1.654,1.752l.1.177q.328.9-.338,1.287l-6.011,3.47a2.809,2.809,0,0,0,2.1.618,3.886,3.886,0,0,0,1.327-.445,4.154,4.154,0,0,0,1.282-1.34l.257-.148a.9.9,0,0,1,1.208.351l.051.088q.547.948-1.656,2.637l-.225.13a4.958,4.958,0,0,1-5.021-.023,5.114,5.114,0,0,1-1.821-1.838,4.976,4.976,0,0,1,.059-5.107,5.4,5.4,0,0,1,1.755-1.741m-.415,5.248,5.257-3.035a3.436,3.436,0,0,0-1.357-.811,3.027,3.027,0,0,0-2.257.169l-.329.19a2.907,2.907,0,0,0-1.416,2.551,2.8,2.8,0,0,0,.1.936"
              />
              <path
                class="c"
                d="M1457.772,2543.876q.907.231.908.871v.148a4.345,4.345,0,0,1,2.993-1.019,5.451,5.451,0,0,1,2.151.5,1.168,1.168,0,0,1,.4.788v.065q-.158.907-.936.908h-.083a5.227,5.227,0,0,0-1.39-.306h-.2a2.879,2.879,0,0,0-2.744,1.946,3.483,3.483,0,0,0-.185,1.187v4.115q0,.75-.927.908h-.055q-.76,0-.936-.945v-8.1q.111-1.065,1.01-1.065"
              />
              <path
                class="c"
                d="M1465.812,2544.107a.837.837,0,0,1,.889.612,3.377,3.377,0,0,1,2.178-.612,3.757,3.757,0,0,1,3.05,1.409,3.712,3.712,0,0,1,2.233-1.3l.816-.112a4.031,4.031,0,0,1,4.078,3.948v5.079q0,.676-.9.853h-.084q-.9-.157-.9-.927v-4.93a2.066,2.066,0,0,0-1.557-2.049l-.426-.055h-.324a2.067,2.067,0,0,0-1.891,1.446,2.01,2.01,0,0,0-.084.518v5.07q-.166.927-.917.927h-.065q-.9-.157-.9-.89v-4.189q0-1.622-.4-1.993a2.044,2.044,0,0,0-1.705-.889h-.1a2.062,2.062,0,0,0-2.011,1.538,4.339,4.339,0,0,0-.093,1.01v4.523q0,.732-.9.89h-.056q-.751,0-.927-.927v-7.905q.1-1.048.992-1.048"
              />
              <path
                class="c"
                d="M1482.51,2544.621a4.979,4.979,0,0,1,5.277.132,5.06,5.06,0,0,1,1.654,1.752l.1.177q.328.9-.338,1.287l-6.012,3.47a2.81,2.81,0,0,0,2.1.618,3.893,3.893,0,0,0,1.327-.445,4.142,4.142,0,0,0,1.281-1.34l.257-.148a.9.9,0,0,1,1.209.351l.051.088q.546.948-1.656,2.637l-.225.13a4.959,4.959,0,0,1-5.021-.023,5.125,5.125,0,0,1-1.822-1.838,4.978,4.978,0,0,1,.059-5.107,5.415,5.415,0,0,1,1.756-1.741m-.416,5.248,5.257-3.035a3.427,3.427,0,0,0-1.356-.811,3.027,3.027,0,0,0-2.257.169l-.329.19a2.91,2.91,0,0,0-1.417,2.551,2.855,2.855,0,0,0,.1.936"
              />
              <path
                class="c"
                d="M1492.059,2543.95q.9.231.9.871v.139a4.3,4.3,0,0,1,3-1.01,4.9,4.9,0,0,1,3.679,1.724,4.784,4.784,0,0,1,1.168,3.049v4.4q0,.686-.909.862h-.092q-.909-.167-.908-.936v-3.874a3.031,3.031,0,0,0-2.049-3.161,3.6,3.6,0,0,0-.889-.129h-.1a2.916,2.916,0,0,0-2.66,1.788,4.672,4.672,0,0,0-.241,1.78v3.633q0,.741-.908.9h-.065q-.76,0-.936-.945v-8.036q.111-1.056,1.01-1.056"
              />
              <path
                class="c"
                d="M1503.889,2540.548h.158q.862.186.862.825v2.781h1.1l.306-.037q.712,0,.936.926a1.039,1.039,0,0,1-.816.992l-.556-.037h-.973v4.717q0,1.113.63,1.326l.732.064h.371q.677,0,.853.9v.083c-.106.6-.414.9-.927.9h-.714a2.833,2.833,0,0,1-2.669-1.946,3.674,3.674,0,0,1-.158-1.122V2546h-.389l-.593.037a1.024,1.024,0,0,1-.816-.982c.106-.6.309-.9.612-.9v-.065l.64.065h.546v-2.595q.113-1.011.862-1.011"
              />
            </g>
          </svg>
        </div>
        <div
          class="footer-content"
        >Copyright©2020 Shenzhen Leaderment Technology Co., Ltd. All rights reserved.</div>
      </div>
    </div>
  </div>
</template>
<script>
import { validUsername } from "@/utils/validate";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
        randomStr: "",
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "Please enter the correct user name",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "The password can not be less than 6 digits",
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$router.push({ path: this.redirect || "/" });
                this.loading = false;
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  .left {
    flex: 1;
    width: 50%;
    background: #ebebe9;
    .images {
      height: 30%;
      width: 100%;
      background: url("./banner.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .mission {
      height: 70%;
      display: flex;
      align-items: center;
      justify-content: center;
      ul {
        padding: 0;
        margin: 0;
        flex: 50% 0 0;
        width: 50%;
        li {
          list-style: none;
          display: flex;
          .info-content {
            padding: 0 15px;
            .text {
              font-size: 16px;
              font-weight: bold;
              line-height: 22px;
            }
            .e-text {
              margin-top: 10px;
              font-size: 14px;
              color: #333333;
            }
          }
          &:nth-child(even) {
            text-align: right;
            justify-content: flex-end;
          }
        }
      }
    }
  }
  .right {
    position: relative;
    flex: 1;
    width: 50%;
    .right-login {
      position: absolute;
      top: 50%;
      width: 100%;
      margin-top: -200px;
    }
    .logo {
      text-align: center;
      font-size: 82px;
      font-family: "Calibri";
      color: #304155;
    }
    .el-form {
      width: 300px;
      margin: 60px auto 0 auto;
      .el-form-item {
        border-bottom: 1px solid #000;
        span {
          font-size: 18px;
          svg {
            width: 12px;
            height: auto;
          }
        }
        .show-pwd {
          position: absolute;
          right: 5px;
          font-size: 14px;
          cursor: pointer;
        }
      }

      .Login {
        margin-top: 20px;
        border-radius: 0;
        width: 100%;
        color: #ffff;
        background: #304155;
        &:hover {
          opacity: 0.9;
        }
      }
    }
    .footer {
      position: absolute;
      bottom: 15px;
      width: 100%;
      text-align: center;
      .logo-leaderment {
        margin-bottom: 3px;
        svg {
          width: 110px;
          height: auto;
        }
      }
      .footer-content {
        font-size: 12px;

        color: #666666;
      }
    }
  }
}
.mission-icon {
  width: 20%;
  height: auto;
  .a,
  .b {
    fill: none;
    stroke-miterlimit: 10;
  }
  .a {
    stroke: #fff;
  }
  .b {
    stroke: #000;
  }
}
.VISION-icon {
  width: 25%;
  height: auto;
  .a,
  .b {
    fill: none;
    stroke-miterlimit: 10;
  }
  .a {
    stroke: #000;
  }
  .b {
    stroke: #fff;
  }
}
.Values-icon {
  width: 20%;
  height: auto;
  .a {
    fill: none;
    stroke: #000;
    stroke-miterlimit: 10;
  }
}
.logo-leaderment {
  .a {
    fill: #a8322e;
  }
  .b {
    fill: #fff;
  }
  .c {
    fill: #474647;
  }
}
</style>
<style lang="scss">
.login-wrap {
  .el-input__inner {
    border: none;
  }
}
</style>